import React, { useEffect, useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Form, FormInstance, Spin } from 'antd';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { getOrderParams, postOrderParams } from '@/services/params/api'
import { isExits, showMsg } from '@/utils/utils';
import { useModel } from 'umi';
import './style.less'
import PermissionControl from '@/components/PermissionControl';
import BreadcrumbDept from '@/components/BreadcrumbDept';

const MallOrderParams: React.FC = () => {
  const formRef = useRef<FormInstance>()
  const [spining, setSpining] = useState<boolean>(false)
  
  useEffect(() => {
    setSpining(true)
    getOrderParams().then((data: PARAMSAPI.OrderParams) => {
      setValues(data)
      setSpining(false)
    }).catch(error => {
      showMsg(error?.data?.errmsg)
      setSpining(false)
    })
  }, [])

  const setValues = (data: PARAMSAPI.OrderParams) => {
    formRef.current?.setFieldsValue({
      order_time_out: data.order_time_out,
      send_time_out: data.send_time_out,
      aftermark_time: data.aftermark_time,
      order_evaluate_time: data.order_evaluate_time,
      complaint_time: data.complaint_time
    })
  }

  return (
    <PageContainer extra={[
     ]} className="order-params-container" breadcrumb={{}}>
      <Spin spinning={spining}>
        <div style={{background: '#fff', padding: 40}}>
          <ProForm 
            className="order-params-form"
            formRef={formRef}
            submitter={isExits('800801001') ? {
              render: (props, doms) => {
                doms.shift();
                return [<PermissionControl action_id="800801001">{doms}</PermissionControl>];
              }
            } : false}
            labelCol={{
              span: 12
            }}
            onFinish={async (values) => {
              console.log(values);
              try {
                const data: PARAMSAPI.OrderParams = await postOrderParams(values as PARAMSAPI.OrderParams)
                setValues(data)
                showMsg('已提交', 'success');
              } catch (error) {
                showMsg(error?.data?.errmsg)
              }
            }}
            layout="horizontal">
              <ProForm.Group>
                <ProFormText 
                  label="订单超过"
                  name="order_time_out"
                  fieldProps={{
                    suffix: '分',
                    allowClear: false
                  }}
                />
                <Form.Item labelCol={{span: 24}} label="未付款，订单自动关闭" />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormText 
                  label="发货超过"
                  name="send_time_out"
                  fieldProps={{
                    suffix: '天',
                    allowClear: false
                  }}
                />
                <Form.Item labelCol={{span: 24}} label="未收货，订单自动完成" />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormText 
                  label="订单完成超过"
                  name="aftermark_time"
                  fieldProps={{
                    suffix: '天',
                    allowClear: false
                  }}
                />
                <Form.Item labelCol={{span: 24}} label="不能申请售后" />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormText 
                  label="订单完成超过"
                  name="order_evaluate_time"
                  fieldProps={{
                    suffix: '天',
                    allowClear: false
                  }}
                />
                <Form.Item labelCol={{span: 24}} label="自动五星好评" />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormText 
                  label="回复后的投诉超过"
                  name="complaint_time"
                  fieldProps={{
                    suffix: '天',
                    allowClear: false
                  }}
                />
                <Form.Item labelCol={{span: 24}} label="无用户反馈，自动关闭" />
              </ProForm.Group>
          </ProForm>
        </div>
      </Spin>
    </PageContainer>
  );
};
export default MallOrderParams;
